﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DataListMenu4.aspx.vb" Inherits="ProjetoDeTestes.DataListMenu4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <%--<script type="text/javascript" src="http://blog.evaria.com/wp-content/themes/blogvaria/jquery/jquery.js"></script>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.5.min.js"></script>
    <script type="text/javascript" src="http://blog.evaria.com/wp-content/themes/blogvaria/jquery/accordion.js"></script>--%>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".lnkMostraMenu").tooltip({ effect: 'slide', direction: 'down', position: 'bottom right', offset: [-10, -110] });
        });
    </script>
    <%--    <script type="text/javascript">
        jQuery().ready(function () {

            $('.theMenu').Accordion({
                /*active: 'h3.selected',*/
                header: 'h3.head',
                alwaysOpen: true,
                animated: true,
                showSpeed: 400,
                hideSpeed: 800
            });



            $('.xtraMenu').Accordion({
                /*active: 'h4.selected',*/
                header: 'h4.head',
                alwaysOpen: true,
                animated: true,
                showSpeed: 400,
                hideSpeed: 800
            });
        });	
    </script>--%>
    <style type="text/css">


*{margin:0px;padding:0px;font-family:Arial;}
#divMenuLista{background: #fff url(bgMenuPerfil.jpg) repeat-x;padding:9px;height:18px;margin-top:20px}
.listaPerfil{list-style-type:none;color:blue;} 
.listaPerfil li{float:left;margin:-2px 0px 0px 0px;border-right:1px solid #dedede;cursor:pointer} 
 
.lnkMostraMenu{color:#888;padding:9px 10px;border-right:0px solid;border-left:0px solid;font-weight:bold;font-size:13px} 
.lnkMostraMenu:hover{color:#fff;padding:9px 10px;background:#090 url(bgMenuPerfilHover.jpg) repeat-x;} 
.tooltiptopo{background:transparent url(setamenuhover.png) no-repeat;height:13px}
.tooltipcontent{background:#fbfbfb;border:5px solid #ebebeb;display:table;padding:5px;}
.tooltip{;margin:0px;max-height:600px;max-width:660px;overflow:auto;display:none} 
.listaTipoForm{margin-top:2px;}
.listaTipoForm li{background:#009900;float:left;border:0px;padding:0px 0px;margin:-2px 5px 0px 0px;list-style-type:none;width:150px;}
.listaTipoForm span{color:red;font-size:14px;color:#ffc;margin:0px;font-weight:bold;font-size:12px} 
.listaForm{margin-top:3px} 
.listaForm li{float:none;padding:0px;background:#fff;width:150px;border-bottom:1px solid #ffc;}
.listaForm li:first-letter{color:#000;font-weight:bold;}
.listaForm li:hover{background:#f0f0f0}
.listaForm li a{font-size:10px;color:#555;text-decoration:none;width:150px;display:block;border-bottom:1px solid;padding:3px 0px}


    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button runat="server" Text="enche o Menu" Width="100%" ID="uia" /><br />
    </div>
    <div id="divMenuLista" runat="server"></div>
    <br />
    <br />
    <br />
    <div id="divMenuLista2">
        <%-- Lista dos Perfis--%>
        <ul class="listaPerfil">
            <li><a class="lnkMostraMenu">Perfil 1</a>
                <div class="tooltip">
                    <div class="tooltiptopo"></div>
                    <div class="tooltipcontent">
                        <ul class="listaTipoForm">
                            <li><span>Tipo Form 1.1</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 1.1.1</span></li>
                                    <li><span>Formulário 1.1.2</span></li>
                                    <li><span>Formulário 1.1.3</span></li>
                                </ul>
                            </li>
                            <li><span>Tipo Form 1.2</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 1.2.1</span></li>
                                    <li><span>Formulário 1.2.2</span></li>
                                    <li><span>Formulário 1.2.3</span></li>
                                </ul>
                            </li>
                            <li><span>Tipo Form 1.3</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 1.3.1</span></li>
                                    <li><span>Formulário 1.3.2</span></li>
                                    <li><span>Formulário 1.3.3</span></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a class="lnkMostraMenu">Perfil 2</a>
                <div class="tooltip">
                    <div class="tooltiptopo"></div>
                    <div class="tooltipcontent">
                        <ul class="listaTipoForm">
                            <li><span>Tipo Form 2.1</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 2.1.1</span></li>
                                    <li><span>Formulário 2.1.2</span></li>
                                    <li><span>Formulário 2.1.3</span></li>
                                </ul>
                            </li>
                            <li><span>Tipo Form 2.2</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 2.2.1</span></li>
                                    <li><span>Formulário 2.2.2</span></li>
                                    <li><span>Formulário 2.2.3</span></li>
                                </ul>
                            </li>
                            <li><span>Tipo Form 2.3</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 2.3.1</span></li>
                                    <li><span>Formulário 2.3.2</span></li>
                                    <li><span>Formulário 2.3.3</span></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a class="lnkMostraMenu">Perfil 3</a>
                <div class="tooltip">
                    <div class="tooltiptopo"></div>
                    <div class="tooltipcontent">
                        <ul class="listaTipoForm">
                            <li><span>Tipo Form 3.1</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 3.1.1</span></li>
                                    <li><span>Formulário 3.1.2</span></li>
                                    <li><span>Formulário 3.1.3</span></li>
                                </ul>
                            </li>
                            <li><span>Tipo Form 3.2</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 3.2.1</span></li>
                                    <li><span>Formulário 3.2.2</span></li>
                                    <li><span>Formulário 3.2.3</span></li>
                                </ul>
                            </li>
                            <li><span>Tipo Form 3.3</span>
                                <ul class="listaForm">
                                    <li><span>Formulário 3.3.1</span></li>
                                    <li><span>Formulário 3.3.2</span></li>
                                    <li><span>Formulário 3.3.3</span></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <br />
    <br />
    <br />
    <div id="divMenu" runat="server"></div>
    </form>
</body>
</html>
